<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 组件</title>
    <style>
        .a{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <alert-box></alert-box>
        <alert-box>你好</alert-box>
        <alert-box><img src="/image/wallhaven-85po71_2560x1600.png" width="300px" height="200px" alt=""></alert-box>
    </div>

    <script src="../Day1/js/vue.js"></script>

    <script>

        Vue.component('alert-box',{
           data:function(){
                return{
                }
            },
            template:`<div class='a'>
                <h2>错误消息</h2>
                <slot>默认消息</slot>
                </div>`,
            methods:{
            }

        });


        var vm=new Vue({
            el:'#app',
            data:{
               
            },
        });
    </script>
</body>
</html>